<template>
  <!-- 查看个人信息 -->
  <div class="myinfo">
    <myheader title="个人信息" rightBtn="修改信息" @updataInfo="changInfo"></myheader>

    <!-- 内容开始 -->
    <div class="content">
      <!-- 账号 -->
      <my-input>
        <template v-slot:myinput_title>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-zhanghao
        " />
          </svg>
          <span>账号</span>
        </template>
        <template v-slot:myinput_input>
          <el-input v-model="user.username" :disabled="true"></el-input>
        </template>
      </my-input>

      <!-- 姓名 -->
      <my-input>
        <template v-slot:myinput_title>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-xingming
        " />
          </svg>
          <span>姓名</span>
        </template>
        <template v-slot:myinput_input>
          <el-input v-model="user.username" :disabled="true"></el-input>
        </template>
      </my-input>

      <!-- 性别 -->
      <my-input>
        <template v-slot:myinput_title>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-xingbie
        " />
          </svg>
          <span>性别</span>
        </template>
        <template v-slot:myinput_input>
          <el-input v-model="user.sex" :disabled="true"></el-input>
        </template>
      </my-input>

      <!-- 年龄 -->
      <my-input>
        <template v-slot:myinput_title>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-nianling
        " />
          </svg>
          <span>年龄</span>
        </template>
        <template v-slot:myinput_input>
          <el-input v-model="user.age" :disabled="true"></el-input>
        </template>
      </my-input>

      <!-- 电话 -->
      <my-input>
        <template v-slot:myinput_title>
          <svg
            t="1630718864962"
            class="icon"
            viewBox="0 0 1026 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="10005"
            width="200"
            height="200"
          >
            <path
              d="M365.677805 670.579551h294.687282V309.498254H365.677805v361.081297z m147.599003 38.814963c-17.364589 0-31.664838 14.300249-31.664838 32.175561s14.300249 32.175561 31.664838 32.175561 31.664838-14.300249 31.664838-32.175561-14.300249-32.175561-31.664838-32.175561zM626.657357 2.553616H399.896259C180.285287 2.553616 2.553616 180.285287 2.553616 399.896259v226.761098c0 219.610973 177.731671 397.342643 397.342643 397.342643h226.761098c219.610973 0 397.342643-177.731671 397.342643-397.342643V399.896259c0-219.610973-177.731671-397.342643-397.342643-397.342643z m85.290773 794.685287c0 15.832419-12.76808 28.600499-28.600499 28.600498H343.205985c-15.832419 0-28.600499-12.76808-28.600499-28.600498v-510.723192c0-15.832419 12.76808-28.600499 28.600499-28.600499h340.652369c15.832419 0 28.600499 12.76808 28.600499 28.600499v510.723192z"
              fill="#01C700"
              p-id="10006"
            />
          </svg>
          <span>电话</span>
        </template>
        <template v-slot:myinput_input>
          <el-input v-model="user.phone" :disabled="true"></el-input>
        </template>
      </my-input>

      <!-- 邮箱 -->
      <my-input>
        <template v-slot:myinput_title>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-youxiang
        " />
          </svg>
          <span>邮箱</span>
        </template>
        <template v-slot:myinput_input>
          <el-input v-model="user.email" :disabled="true"></el-input>
          <span style="font-size:14px;" @click="editEmail">
            <svg
              t="1630766152897"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="10085"
              width="48"
              height="48"
            >
              <path
                d="M337.39946667 677.3632c19.28746667 19.2864 49.7408 19.2864 68.0128 0L936.32 146.45653333c19.28746667-19.28746667 19.28746667-49.7408 0-69.02826666s-49.7408-19.28746667-68.0128 0L337.39946667 608.33493333c-19.28746667 19.28746667-19.28746667 49.7408 0 69.02826667z"
                fill="#8a8a8a"
                p-id="10086"
              />
              <path
                d="M925.152 438.8096c-26.39253333 0-48.72533333 21.3184-48.72533333 48.72533333v388.7904h-728.85333334v-728.85333333h388.78933334c26.3936 0 47.71093333-21.3184 48.72533333-48.7264 0-26.3936-21.31733333-48.72533333-47.70986667-48.72533333H98.84693333c-26.39253333 0-48.72533333 21.31733333-48.72533333 48.72533333v826.30613333c0 13.19573333 5.0752 25.37813333 14.2112 34.51413334 9.136 9.136 21.31733333 14.2112 34.51413333 14.2112h826.30613334c13.1968 0 25.37813333-5.0752 34.51413333-14.2112 9.136-9.136 14.2112-21.3184 14.2112-34.51413334V487.536c0-27.408-22.3328-48.72533333-48.72533333-48.72533333z"
                fill="#8a8a8a"
                p-id="10087"
              />
            </svg>
          </span>
        </template>
      </my-input>

      <!-- 地址 -->
      <my-input>
        <template v-slot:myinput_title>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-dizhi
        " />
          </svg>
          <span>地址</span>
        </template>
        <template v-slot:myinput_input>
          <el-input type="textarea" :placeholder="getaddres()" show-word-limit :disabled="true"></el-input>
        </template>
      </my-input>
    </div>
  </div>
</template>

<script>
import myheader from '../../comon/myheader.vue' //头文件
import myInput from '../../comon/myInput.vue' //我的信息插槽

export default {
  data() {
    return {
      user: {},
      dialogVisible: false,
    }
  },
  components: {
    myheader,
    myInput,
  },
  created() {
    // 从vuex中获取用户数据
    this.user = this.$store.getters.getUserInfo
  },

  methods: {
    // 获取地址
    getaddres() {
      return (
        this.user.province +
        this.user.city +
        this.user.county +
        this.user.address
      )
    },
    //修改页面
    changInfo() {
      this.$router.push('/myUpdate')
    },
    editEmail() {
      let oldEmail = this.user.email
      let username = this.user.username
      this.$router.push({
        name: 'myUpdataEmail',
        params: { oldEmail, username },
      }) // 只能用 name
    },
  },
  computed: {
    // ...mapState(["user"]),
  },
}
</script>

<style scoped>
.myinfo {
  margin-top: 46px;
}
</style>
